﻿@{
    ViewBag.Title = "Parts";
}
<link rel="Stylesheet" type="text/css" href="@Url.Content("~/Content/liteGrid-default.css")" />
<script type="text/javascript" src="@Url.Content("~/Scripts/Shared/jquery.jeditable.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/Shared/jquery.blockUI.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/Shared/jquery.validate.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/Shared/jquery.qtip.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/Shared/liteGrid.min.js")"></script>
<script type="text/javascript">
	$(function () {
		$("#comics").inrad_liteGrid({
			columns: [
				{ field: "utils", header: "&nbsp;" },
				{ field: "Name", editable: true, sortable: true },
				{ field: "Price", header: "Unit Price", editable: true, sortable: true },
				{ field: "Coating", editable: true, sortable: true },
				{ field: "Description", editable: true, sortable: true },
				{ field: "Available", editable: true, sortable: true, type: "checkbox" },
			],
			dataProviderFactory: function () { 
				return new AjaxDataProvider({
					rootDataUrl: "@Url.Action("Data")",
					saveDataUrl: "@Url.Action("Save")",
				}) 
			},
			modules: [new TreeGridModule(), new StripifyModule(), new JEditableModule(),
				  new ToolbarModule(), new BatchSaveModule(), new CheckboxValueModule(),
				  new FormatModule(), new BlockUIModule(), new RowAdditionModule(),
				  new RowDeleteModule(), new RowSortModule(), new DraggableRowsModule(),
				  new ValidateModule()],
			rowIdColumn: "ID",
			validateRules: { Name: "required", Price: "number" },
			validateMessages: { Name: "Please enter a name.", Price: "Price must be a number."}
		});
	});
</script>
<style>
	col.DescriptionColumn 
	{
		width: 300px;
	}
</style>

<h2>Parts</h2>

<table id="comics">

</table>